<template>
	<scroll-view style="height: 100%;" scroll-y="true">
		<view class="opinion-form" style="margin: 20px 15px;">
			<uni-forms label-position="top" :modelValue="formData">
				<uni-forms-item label="标题" required>
					<uni-easyinput type="text" v-model="formData.title" :clearable="false" placeholder="请输入标题" />
				</uni-forms-item>
				<!-- <uni-forms-item label="类型" required>
					<uni-easyinput type="text"  placeholder="请输入标题" />
				</uni-forms-item> -->
				<uni-forms-item required label="内容">
					<uni-easyinput type="textarea" maxlength="-1" autoHeight v-model="formData.content" placeholder="请输入内容"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="添加图片">
					<uni-file-picker 
						v-model="imageValue" 
						fileMediatype="image" 
						mode="grid" 
						:auto-upload="false"
						@select="selectImgs" 
						@delete="removeImg"
					/>
				</uni-forms-item>
			</uni-forms>
			<button type="primary" class="btn submit" @click="submitForm(1)">正式提交</button>
			<button type="primary" class="btn save" @click="submitForm(2)">保存草稿</button>
			<button type="primary" class="btn delete" @click="deleteOpinion()" v-if="id">删除草稿</button>
		</view>
	</scroll-view>
</template>

<script>
	import request from '../../common/request.js'
	import upload from '../../common/upload.js'
	export default {
		props:['id'],
		data() {
			return {
				imageValue:[],
				uploadImages:[],
				page: 1,
				loadStatus: 'loading',
				showLoad: false,
				formData:{
					title:'',
					content: '',
					images: '',
					draft: 1,
				},
				timeout: null,
			}
		},
		beforeDestroy() {
			if(this.timeout){
				clearTimeout(this.timeout)
			}
		},
		mounted(){
			if(this.id){
				this.getDetailData()
			}
		},
		methods: {
			deleteOpinion(){
				request({
					url:'/opinions/delDraft',
					data:{
						opinions_id: this.id
					},
					method: 'POST'
				}).then(res => {
					if(res.code == 1){
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
						this.timeout = setTimeout(() => {
							let data = {
								page: 'form',
								type: 2
							}
							uni.$emit('showContent', data)
						}, 2000)
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			getDetailData(){
				request({
					url:'/opinions/detail',
					data:{
						opinions_id: this.id
					},
					method: 'POST'
				}).then(res => {
					if(res.code == 1){
						this.formData = res.data
						if(Array.isArray(res.data.images)){
							res.data.images.forEach(url => {
								this.imageValue.push({
									url: url
								})
							}) 
						}else if(res.data.images != ""){
							let path = res.data.images.split('/uploads')
							this.imageValue.push({
								url: res.data.images
							})
						}
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			selectImgs(data){
				// console.log(data)
				this.uploadImages = this.uploadImages.concat(data.tempFilePaths)
			},
			removeImg(data){
				this.uploadImages = this.uploadImages.filter(item => item != data.tempFilePath)
				this.imageValue = this.imageValue.filter(item => item.url != data.tempFilePath)
				// console.log(this.uploadImages)
			},
			imageUpload() {
				let tasks = []
				this.uploadImages.forEach(url => {
					tasks.push(
						upload({
							url:'/common/upload',
							file: url
						})
					);
				})
				return Promise.all(tasks);
			},
			async submitForm(type){
				if(!this.formData.title || !this.formData.content){
					uni.showToast({
						title: '请填写标题或内容',
						icon: 'none',
					});
					return false
				}
				let images = []
				if(this.uploadImages.length > 0){
					let uploadImages = await this.imageUpload()
					uploadImages.forEach(item => {
						let imgData = JSON.parse(item)
						if(imgData.data.url) images.push(imgData.data.url)
					})
				}
				if(this.imageValue.length > 0){
					this.imageValue.forEach(item => {
						let path = item.url.split('/uploads')
						let uploadUrl = (path[1] && ('/uploads' + path[1])) || ''
						images.push(uploadUrl)
					})
				}
				this.formData.images = images.join(',')
				this.formData.draft = type
				if(this.formData.id){
					let param = {
						opinions_id: this.formData.id,
						title: this.formData.title,
						draft: this.formData.draft,
						content: this.formData.content,
						images: this.formData.images,
						launch_time: this.formData.createtime_text
					}
					request({
						url:'/opinions/editOpinion',
						data: param,
						method:'POST',
					}).then(res => {
							if(res.code == 1){
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 2000
								});
								this.timeout = setTimeout(() => {
									let data = {
										page: 'form',
										type: type
									}
									uni.$emit('showContent', data)
								}, 2000)
							}else{
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 2000
								});
							}
						})
				}else{
					request({
						url:'/opinions/addOpinion',
						data: this.formData,
						method:'POST',
					}).then(res => {
							if(res.code == 1){
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 2000
								});
								this.timeout = setTimeout(() => {
									let data = {
										page: 'form',
										type: type
									}
									uni.$emit('showContent', data)
								}, 2000)
							}else{
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 2000
								});
							}
						})
				}
			},
		}
	}
</script>

<style scoped>
	
	.form-content{
		padding: 30px 0px 20px;
	}
	
	.btn{
		margin-bottom: 15px;
		font-size: 14px;
		padding: 5px;
		border-radius: 30px;
	}
	.btn.submit{
		background-color: #2668be;
		margin-top: 30px;
	}
	.btn.save{
		background-color: #fb7a30;
	}
	.btn.delete{
		background-color: #ea5c55;
	}
</style>